<template>
  <div class="detail">
    <ul>
      <li>商品编号：{{ detailData.value.code }}</li>
      <li>
        商品名称：<b>{{ detailData.value.name }}</b>
      </li>
      <li>商品价格：¥{{ detailData.value.price }}</li>
      <li>商品库存：{{ detailData.value.stock }}</li>
      <li>
        商品状态：<span
          :style="{ color: detailData.value.status === '1' ? 'green' : 'red' }"
          >{{ statusList[detailData.value.status] }}</span
        >
      </li>
    </ul>
    <el-row justify="center">
      <el-button @click="handleBackList">返回列表</el-button>
      <el-button type="danger" @click="handleDeleteProduct">删除商品</el-button>
    </el-row>
  </div>
</template>

<script lang="ts">
import { reactive, onMounted, defineComponent } from "vue";
import { ElMessage } from "element-plus";
import { getDetail, deleteProduct } from "@/api/index";
import { useRoute, useRouter } from "vue-router";
import { statusList } from "@/utils/tools";

export default defineComponent({
  name: "Detail",
  setup() {
    
    let detailData = reactive({
      value: {
        code: "",
        name: "",
        price: "",
        stock: "",
        status: "",
      },
    } as any);
    const route = useRoute();
    const router = useRouter();

    onMounted(() => {
      init();
    });

    const init = async () => {
      const id = route.query.code;
      const result = await getDetail(id);
      detailData.value = result;
    };

    const handleBackList = () => {
      router.push("/");
    };

    const handleDeleteProduct = async () => {
      if (detailData.value.status === "1") {
        ElMessage.warning("请先下架商品之后再删除");
        return false;
      }

      const id = route.query.code;
      const result = await deleteProduct(id);
      if (result) {
        ElMessage.success("删除成功");
        handleBackList();
      }
    };

    return {
      statusList,
      detailData,
      handleBackList,
      handleDeleteProduct,
    };
  },
});
</script>
<style scoped>
.detail {
  width: 400px;
  margin: 10px auto;
}
.detail ul {
  list-style: none;
  text-align: left;
}
.detail li {
  padding: 10px 0;
}
</style>
